@import "../vendor/bower/bootstrap/dist/css/bootstrap.css";

// COLOR SETTINGS

// Base Settings
@page-width: 1170px;
@default-input-width: 280px;
@default-label-width: 200px;

// Base Palette
@base-dark-color:  #415766;
@base-light-color: @base-dark-color + #7a746c;
@base-text-color:  #525960;

// Node Colors
@base-node-color: #e1e4e6;
@base-node-border: @base-node-color - 30%;  // - #1e1f1f;

// Node Selected
@node-color-selected: @base-node-color - 15%; //#101010;
@node-border-color-selected: @base-node-color - 15%; //#101010;

// Node Unallocated
@node-color-discover: @white;
@node-border-color-discover: @base-node-border;
@node-color-discover-hover: @base-node-color + 15%; //#141414;

// Node Error
@node-color-error: @red + 160%; //#decace;
@node-border-color-error: @red + 10%;

// Node New
@node-color-pending_addition: @base-node-color;
@node-border-color-pending_addition: @green - 20%;

// Node Offline
@node-color-offline: @base-node-color;
@node-border-color-offline: @base-node-border;

// Other Colors
@white:      #ffffff;
@black:      #000000;
@red:        #c94b4b;
@pure-red:   #ff0000;
@green:      #54a854;
@blue:       #4e85aa; //#688db4;
@orange:     #bc6e12;
@gray:       #8c8c8c;

// Background colors
@light-blue:       #eaf0f2;
@pale-blue:        #c9e4ee;
@light-green:      #d0f2dd;
@light-yellow:     #f7e4bf;
@light-red:        #f6c4c3;
@aquamarine:       #bbedcf;
@rose:             #f2aaa9;
@coral:            #ea7170;
@emergency-red:    #a34f4e;

@alert-success-bg: #cae8c6;
@alert-info-bg:    #c1d4e1;
@alert-warning-bg: #f2e0b9;
@alert-danger-bg:  #e8c6c6;

@link-color: saturate(lighten(@base-dark-color, 20%), 30%);
@link-color-hover: saturate(lighten(@base-dark-color, 10%), 15%);
@navbar-color: saturate(lighten(@base-dark-color, 20%), 15%);
@navbar-color-active: saturate(lighten(@base-dark-color, 20%), 15%);
@navbar-icon-color: @base-dark-color + #203c4c;
@shadow-color: rgba(0,0,0,0.5);

// Tabs & Content Settings
@tab-color: desaturate(lighten(@base-dark-color, 55%), 20%);
@tab-color-hover: desaturate(lighten(@base-dark-color, 50%), 20%);
@tab-color-active: @white;

// Fonts and Weight
@import "../vendor/bower/open-sans-fontface/open-sans.css";

@open-sans-font: 'Open Sans', helvetica, arial, tahoma, verdana, sans-serif;

// Bebas Regular
@font-face {
  font-family: 'bebas';
  src: url('../fonts/bebas_regular.eot');
  src: url('../fonts/bebas_regular.eot?#iefix') format('embedded-opentype'), url('../fonts/bebas_regular.woff2') format('woff2'), url('../fonts/bebas_regular.woff') format('woff'), url('../fonts/bebas_regular.ttf') format('truetype'), url('../fonts/bebas_regular.svg#bebas_regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

// Bebas Bold
@font-face {
  font-family: 'bebas bold';
  src: url('../fonts/bebas-bold.eot');
  src: url('../fonts/bebas_bold.eot?#iefix') format('embedded-opentype'), url('../fonts/bebas_bold.woff2') format('woff2'), url('../fonts/bebas_bold.woff') format('woff'), url('../fonts/bebas_bold.ttf') format('truetype'), url('../fonts/bebas_bold.svg#bebas_bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

.font-light {font-weight: 300;}
.font-normal {font-weight: normal;}
.font-semibold {font-weight: 600;}
.font-bold {font-weight: bold;}
.font-extrabold {font-weight: 800;}

@base-font-size: 14px;

@footer-height: 70px;

// MIXINS

.text-emboss() {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.text-shadow() {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.clearfix() {
  content: " ";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

.break-word() {
  /* the following code refers to https://css-tricks.com/almanac/properties/w/word-break/ */
  word-wrap: break-word;
  hyphens: auto;
  -moz-hyphens: auto; /* for word-wrap to work in FF */
  word-break: break-word; /* non standard for webkit */
}

// ICONS

.icon-default-styles(@top, @left) {
  width: 15px;
  height: 15px;
  background: url(@common-icons-sprite) @top @left no-repeat;
  &, &:before, &:after {
    content: none;
  }
}

.glyphicon-warning-sign {
  .icon-default-styles(-52px, -132px);
}

.glyphicon-danger-sign {
  .icon-default-styles(-13px, -132px);
  width: 16px;
}

.glyphicon-info-sign {
  .icon-default-styles(-13px, -612px);
}

.glyphicon-bell {
  .icon-default-styles(-13px, -652px);
}

.glyphicon-trash {
  .icon-default-styles(-13px, -691px);
}

.glyphicon-edit {
  .icon-default-styles(-56px, -691px);
}

.node-management-button-sizes {
  width: 16px;
  height: 17px;
}

.glyphicon-th {
  .icon-default-styles(-12px, -252px);
  .node-management-button-sizes;
}

.glyphicon-th-list {
  .icon-default-styles(-12px, -292px);
  .node-management-button-sizes;
}

.glyphicon-sort {
  .icon-default-styles(-12px, -372px);
  .node-management-button-sizes;
}

.glyphicon-filter {
  .icon-default-styles(-12px, -412px);
  .node-management-button-sizes;
}

.glyphicon-search {
  .icon-default-styles(-12px, -452px);
  .node-management-button-sizes;
}

.glyphicon-tag {
  .icon-default-styles(-12px, -332px);
  .node-management-button-sizes;
}

.glyphicon-tag-alt {
  .icon-default-styles(-52px, -332px);
  .node-management-button-sizes;
}

.glyphicon-pencil-alt {
  .icon-default-styles(-13px, -492px);
  &:hover {
    background: url(@common-icons-sprite) -53px -492px no-repeat;
    cursor: pointer;
  }
}
.glyphicon-pushpin {
  .icon-default-styles(-12px, -734px);
}
.glyphicon-time {
  .icon-default-styles(-12px, -774px);
}
.glyphicon-tags {
  .icon-default-styles(-52px, -734px);
}

.glyphicon-list-alt {
  .icon-default-styles(-52px, -212px);
}

// BASE SETTINGS

:focus {
  outline:none !important; // This option removes the blue border around the buttons in chrome and safari
}

html, body {
  font-family: @open-sans-font;
  font-weight: normal;
  font-size: @base-font-size;
  background-color: @base-dark-color;
  height: 100%;
}

b, strong {
  .font-semibold;
}

a {
  color: @link-color;
  &:hover {
    color: @link-color-hover;
  }
}

h1, h2, h3, h4, h5, h6 {
  .font-light;
}

.text-success {color: @green;}
.text-danger {color: @red;}
.text-info {color: @blue;}
.text-warning {color: @orange;}
.text-critical {color: @pure-red;}

button, .btn:not(.btn-link) {.font-semibold;}

.btn-transparent {
  border: none;
  background-color: rgba(0, 0, 0, 0.0);
  border-radius: 6px;
  height: 38px;
  padding: 0;
  width: 38px;
  margin-right: 10px;
  &:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
  &:focus {
    border: 0px;
    outline: 0;
    outline-color: @red;
    outline-style: none;
    text-decoration: none !important;
  }
}

#main-container, #content-wrapper {
  height: 100%;
}

@common-icons-sprite: "../img/icons/icons-sprite.svg";

.loading-ticket {
  display: inline-block;
  padding: 10px;
  background-color: rgba(230,130,13,.85);
  background-opacity: 50%;
  border-radius: 4px;
  position: fixed;
  width: 120px;
  height: 40px;
  overflow: hidden;
  top: 48px;
  left: 50%;
  margin-left: -60px;
  z-index: 9999999;
  color: @white;
  .font-semibold;
  .icon {
    width: 20px;
    height: 20px;
    float: left;
    background: url(@common-icons-sprite) no-repeat -51px -90px;
    margin: 0px 8px 0px 2px;
    animation: fade-cloud 1s infinite;
  }
  .text {
    display: inline-block;
    float: left;
  }
}

.modal-open .modal {
  overflow-x: auto;
}

.clamp {
  width: 100%;
  max-width: @page-width;
  min-width: @page-width;
  margin-left: auto;
  margin-right: auto;
  height: auto !important;
  min-height: 100%;
  &:after {
    .clearfix;
  }
}

.content-elements:last-child::after {
  display: block;
  margin: 20px 0;
  margin-bottom: -20px;
  content: "";
  height: 0;
}

// ALERTS

.alert {
  border-radius: 3px;
  border: none;
  strong {
    font-size: @base-font-size + 4px;
    line-height: 1px;
  }
}

.alert-success {
  background-color: @alert-success-bg;
  &, .close {color: @green;}
}

.alert-info {
  background-color: @alert-info-bg;
  &, .close {color: @blue;}
}

.alert-warning {
  background-color: @alert-warning-bg;
  &, .close {color: @orange;}
}

.alert-danger {
  background-color: @alert-danger-bg;
  &, .close {color: @red;}
}

.global-alert {
  background: @base-dark-color - 20%;
  font-size: @base-font-size - 1px;
  .text-shadow;
  .close {
    opacity: 1;
    text-shadow: 0 0;
    &:hover {
      opacity: .7;
    }
  }
  strong {
    font-size: @base-font-size + 2px;
    line-height: 1px;
  }
  a {
    color: @link-color + 40%;
    font-size: @base-font-size - 1px;
    &:hover {
      color: @link-color + 20%;
    }
  }
  .task-result-details {
    @deployment-result-indent: 5px;
    margin-top: @deployment-result-indent;
    .btn-link {
      padding: 0;
      color: @link-color;
      font-size: @base-font-size - 1px;
    }
    pre {
      background: none;
      border: none;
      padding: @deployment-result-indent * 2 0 @deployment-result-indent;
      margin: 0;
      line-height: 0.6;
      .text-success;
    }
  }
}

.default-password-alert {
  margin-top: 20px;
  &, .close {color: @orange + 50%;}
  .global-alert;
}

// CUSTOM CHECKBOX/RADIOBUTTON

.custom-tumbler {
  margin: 0 6px 0 0;
  position: relative;
  float: left;
  width: 22px;
  height: 22px;
}

.custom-tumbler input {
  overflow: hidden;
  position: absolute;
  cursor: pointer;
  margin: 5px 0 0 5px;
  width: 22px;
  height: 22px;
  &, &.form-control {
    opacity: 0 !important;
  }
}

.custom-tumbler input + span {
  display: block;
  overflow: hidden;
  font-size: 1px;
  line-height: 0;
  background: url("../img/ui/radio_checkbox.svg") no-repeat 0 0 transparent;
  width: 22px;
  height: 22px;
}

.custom-tumbler input:checked + span {
  background: url("../img/ui/radio_checkbox.svg") no-repeat -22px 0px;
}

.custom-tumbler input:indeterminate + span {
  background: url("../img/ui/radio_checkbox.svg") no-repeat -44px 0px;
}

.custom-tumbler input[disabled] + span {
  opacity: 0.4;
  cursor: not-allowed;
}

.custom-tumbler input[type=radio] {
  margin-top: 0;
}

.custom-tumbler input[type=radio] + span {
  background: url("../img/ui/radio_checkbox.svg") no-repeat 0px -22px;
}

.custom-tumbler input[type=radio]:checked + span {
  background: url("../img/ui/radio_checkbox.svg") no-repeat -22px -22px;
}

// NAVIGATION

.navbar-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
  width: 100%;
  height: 70px;
  background-color: @white;
  box-shadow: 0 0 10px @shadow-color;
  min-width: @page-width;
}

.navigation-box {
  width: 100%;
  background-color: @white;
}

.navbar {
  border-radius: 0px;
  border: 0px solid transparent;
  margin: 0px;
  min-height: 70px;
  position: relative;
}

.navbar-default {
  background-color: transparent;
  border-color: transparent;
  .navbar-nav {
    margin: 0;
    margin-top: 18px;
    li {
      display: inline-block;
      width: auto;
      background-color: @white;
      a {
        font-family: 'bebas';
        font-size: @base-font-size + 7;
        color: @navbar-color;
        padding-top: 7px;
        padding-bottom: 0px;
        height: 34px;
        margin-left: 4px;
        -webkit-font-smoothing: antialiased;
        &:hover {
          color: @white;
          background-color: @base-light-color;
          border-radius: 4px;
        }
        &:focus {
          color: @white;
          background-color: @base-light-color;
          border-radius: 4px;
        }
      }
    }
    .active {
      a {
        color: @white;
        background-color: @navbar-color-active;
        border-radius: 4px;
        &:hover {
          color: @white;
          background-color: @navbar-color-active;
          border-radius: 4px;
        }
        &:focus {
          color: @white;
          background-color: @navbar-color-active;
          border-radius: 4px;
        }
      }
    }
  }
}

.navbar-logo {
  float: left;
  height: 60px;
  line-height: 20px;
  padding: 0px;
  margin-top: 2px;
  width: 166px;
  background: url(../img/logos/fuel-logo.svg) no-repeat top left;
}

.navbar-icons {
  @navbar-icon-count: 4;
  @navbar-icon-size: 44px;
  @navbar-icon-spacing: 10px;
  @navbar-icon-font: 'bebas bold';
  margin-top: 13px;
  margin-right: 0;
  height: @navbar-icon-size;
  position: relative;
  > li {
    color: @navbar-icon-color;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: @navbar-icon-size;
    height: @navbar-icon-size;
    margin-left: @navbar-icon-spacing;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    .badge {
      position: absolute;
      top: 0;
      right: 0;
      background-color: @red;
      border-radius: 4px;
      font-family: @navbar-icon-font;
      font-weight: 100;
      padding: 3px 3px 3px 4px;
      box-shadow: 0 1px 1px @shadow-color;
      font-size: @base-font-size;
      letter-spacing: 1px;
      box-sizing: border-box;
    }
    .badge-animation-enter {
      opacity: 0;
      transition: opacity .8s ease-in;
      &.badge-animation-enter-active {
        opacity: 1;
      }
    }
    .badge-animation-leave {
      opacity: 1;
      transition: opacity .5s ease-in;
      &.badge-animation-leave-active {
        opacity: 0;
      }
    }
    .navbar-icon-sprite-index(@index) {
      @icon-sprite-img: "../img/icons/header-icons-sprite.svg";
      background: url(@icon-sprite-img) no-repeat 0 -@navbar-icon-size * @index;
      &:hover {
        background: url(@icon-sprite-img) no-repeat -@navbar-icon-size -@navbar-icon-size * @index;
      }
    }

    &.language-icon {
      .navbar-icon-sprite-index(0);
      .language-text {
        display: block;
        text-align: center;
        margin-left: 0;
        margin-top: 7px;
        font-family: @navbar-icon-font;
        font-size: @base-font-size + 8;
      }
    }

    &.statistics-icon {
      .navbar-icon-sprite-index(1);
      .unallocated {
        display: block;
        text-align: center;
        font-size: @base-font-size - 4;
        .font-bold;
        margin: 8px 0 0 0;
      }
      .total {
        display: block;
        text-align: center;
        .font-bold;
        font-size: @base-font-size - 4;
        margin: 1px 0 0 0;
      }
      &.no-unallocated {
        .navbar-icon-sprite-index(0);
        .total {
          font-size: @base-font-size + 4;
          margin-top: 10px;
        }
      }
    }

    &.user-icon {
      .navbar-icon-sprite-index(2);
    }

    &.notifications-icon {
      .navbar-icon-sprite-index(3);
    }
  }

  .popover {
    @default-popover-width: 260px;
    @default-arrow-offset: 10px;
    display: block;
    position: absolute;
    left: 0;
    top: @navbar-icon-size;
    max-width: none;
    width: @default-popover-width;
    z-index: 1060;
    font-family: @open-sans-font;
    .font-normal;
    font-size: @base-font-size - 1px;
    line-height: 1.2;
    background-color: @white;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    padding: 1px;
    text-align: left;
    white-space: normal;
    color: @base-text-color;
    > .arrow {
      left: auto;
      right: @default-arrow-offset;
    }
    > .popover-content {
      padding: 12px;
    }

    .popover-layout(@index, @width: @default-popover-width) {
      width: @width;
      @navbar-icon-width: @navbar-icon-size + @navbar-icon-spacing;
      @popover-right-align-offset: @navbar-icon-width * @navbar-icon-count - @width;
      @popover-center-align-offset: @popover-right-align-offset - @navbar-icon-width * @index  + @width / 2 - @navbar-icon-size / 2;
      @popover-offset: min(@popover-right-align-offset, @popover-center-align-offset);
      left: @popover-offset;
      > .arrow {
        right: @default-arrow-offset + @navbar-icon-width * @index + (@popover-offset - @popover-right-align-offset);
      }
    }

    &.notifications-popover {
      .popover-layout(@index: 0);
      .notification {
        border-bottom: 1px solid @gray + 80%;
        padding-bottom: 14px;
        margin-bottom: 10px;
        box-sizing: border-box;
        .glyphicon {
          display: block;
          font-size: @base-font-size + 2px;
          float: left;
          width: 10%;
          margin-top: 2px;
        }
        p {
          display: block;
          width: 90%;
          float: left;
          margin: 0;
          .break-word;
        }
        &.clickable {
          p {
            color: @link-color;
            cursor: pointer;
            &:hover {
              text-decoration: underline;
              color: @link-color-hover;
            }
          }
        }
        &.unread {
          .font-semibold;
        }
        &:after {
          .clearfix;
        }
        &:last-child {
          border-bottom: 0;
          padding-bottom: 0;
          margin-bottom: 0;
        }
      }
      .show-more {
        text-align: center;
        .font-semibold;
        font-size: @base-font-size;
      }
    }

    &.user-popover {
      .popover-layout(@index: 1);
      .username {
        color: @gray;
      }
      .name {
        margin: 4px 0px 10px 0px;
        padding: 0px;
      }
      .user-actions {
        .clearfix;
      }
      button {
        .glyphicon {
          margin-right: 3px;
        }
      }
    }

    &.statistics-popover {
      .popover-layout(@index: 2, @width: 230px);
      .list-group {
        margin: 0;
      }
    }

    &.language-popover {
      .popover-layout(@index: 3, @width: 110px);
      a {
        cursor: pointer;
      }
    }
  }
}

// BREADCRUMBS

.breadcrumb {
  background-color: transparent;
  border-radius: 4px;
  list-style: outside none none;
  font-size: @base-font-size - 1;
  .text-shadow;
  margin: 8px 0 0 0;
  padding: 0;
  li {
    display: inline-block;
    a {
      color: @blue + 60%;
    }
  }
  li + li {
    box-sizing: border-box;
    &:before {
      padding: 0 5px;
      color: @base-light-color;
      content: "/";
    }
  }
  .active {
    color: @base-light-color;
  }
}

// FOOTER

#footer-spacer {
  height: 80px;
  clear: both;
}

.footer {
  display: block;
  max-width: @page-width;
  margin-left: auto;
  margin-right: auto;
  color: @base-dark-color + 60%;
  font-size: @base-font-size - 2;
  height: 70px;
  overflow: hidden;
  margin-top: -70px;
  padding-top: 16px;
  box-sizing: border-box;
  > .mirantis-logo-white {
    display: block;
    width: 61px;
    height: 30px;
    float: left;
    background: url(../img/logos/mirantis-logo-white.svg) no-repeat 0px 0px;
    background-size: contain;
    margin-right: 10px;
  }
}

// PAGE ELEMENTS

.page-title {
  margin: 10px 0 14px;
  .title {
    margin: 0;
    padding: 0;
    color: @white;
    font-size: @base-font-size + 12;
    display: block;
    .font-light;
    .text-shadow;
  }
}

.content-box {
  background-color: @white;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  padding: 20px;
  color: @base-text-color;
  box-sizing: border-box;
  .row {
    .title {
      padding: 0px 15px 0px 15px;
      margin-bottom: 10px;
      margin-top: 0;
      .font-light;
      font-size: @base-font-size + 12;
    }
  }
}

// PAGES

.welcome-page {
  @vertical-offset: 20px;
  padding: 40px;
  > div {
    background-color: @white;
    border-radius: 10px;
    padding: 10px 30px 30px 30px;
    box-sizing: border-box;
    > div {text-align: center;}
    h1 {margin-bottom: @vertical-offset + 10;}
    .notice {
      color:@gray;
      font-size: @base-font-size - 2;
      width: 80%;
      margin: 0 auto;
    }
    .register_installation {
      width: 80%;
      margin: 0 auto 30px auto;
    }
    .happy-cloud {
      padding: 30px;
      .cloud-smile {
        width: 146px;
        height: 108px;
        background-image: url(../img/cloud-smile.png);
        background-repeat: no-repeat;
        margin: 0 auto;
        + div {
          margin-top: @vertical-offset;
          font-size: @base-font-size + 6;
        }
      }
      span {color: @green - 30%;}
    }
    .welcome-checkbox-box {
      text-align: center;
      padding-top: @vertical-offset;
    }
    .welcome-button-box {
      margin: @vertical-offset 0;
      .btn-lg {
        font-size: @base-font-size;
        margin: 2px 0;
      }
    }
    .register-trial {
      padding: @vertical-offset 10px 4px 10px;
      margin: 0 -30px 7px;
      background-color: @light-blue;
    }
  }
}

.tracking {
  @vertical-offset: 20px;
  .checkbox-group label, .form-group label {.font-semibold;}
  .text-danger {
    margin-bottom: 15px;
    font-style: italic;
    .glyphicon {margin-right: 10px;}
  }
  .help-block {font-style: italic;}
  .statistics-disclaimer-box {
    background-color: @gray + 100%;
    border: 1px solid @gray + 84%;
    overflow-y: auto;
    padding: 20px;
    margin-bottom: 16px;
    text-align: left;
    height: 300px;
    max-height: 300px;
    box-sizing: border-box;
    p { margin-bottom: 10px; }
    ul { margin-bottom: @vertical-offset; }
  }
  .connection-form {
    width: 300px;
    margin: 0 auto;
    text-align: left;
    .help-block {text-align: right;}
    .links-container {
      min-height: 20px;
      margin: 15px 0 20px;
    }
    .btn-link {padding: 0;}
  }
  &.registration-form {
    padding: 15px;
    .form-inline {margin-left: 0;}
    .form-inline div {padding: 0 7px 0 0;}
    .form-group {
      vertical-align: top;
      input {width: 100%;}
      select {width: 100%;}
    }
    .checkbox-group {margin-top: @vertical-offset + 10;}
  }
}

.cluster-page {
  .page-title {
    .title-node-count {
      color: @blue + 60%;
      display: inline-block;
      font-size: @base-font-size + 4;
      left: 18px;
      position: relative;
      top: -2px;
    }
    .cluster-info {
      display: block;
      height: 20px;
      margin-bottom: 10px;
      overflow: hidden;
      ul {
        display: block;
        list-style: outside none none;
        margin-bottom: 0;
        padding-left: 0;
        li {
          float: left;
          margin-right: 18px;
          font-size: @base-font-size - 3;
          color: @base-light-color;
          -webkit-font-smoothing: subpixel-antialiased;
          .text-shadow;
        }
      }
    }
  }

  h4 {
    .font-normal;
    color: @base-text-color;
  }
  .deploy-box {
    display: block;
    height: 60px;
    overflow: hidden;
    padding-right: 0px;
    padding-top: 20px;
    box-sizing: border-box;
  }
  .deploy-icon {
    position: relative;
    top: 3px;
    display: inline-block;
    margin-right: 6px;
    background: url(@common-icons-sprite) no-repeat -10px -90px;
    width: 22px;
    height: 18px;
    &:before {
      content: " ";
    }
  }
  .deploy-process {
    display: block;
    height: 40px;
    overflow: hidden;
    padding-top: 6px;
    .progress {
      display: inline-block;
      width: 140px;
      height: 22px;
    }
    .deploy-percents {
      display: block;
      width: 30px;
      overflow: hidden;
      margin: 3px 10px 0px 10px;
      color: @white;
      .font-light;
      font-size: @base-font-size - 2;
    }
  }
  .discard-changes-icon {
    position: relative;
    display: inline-block;
    background: url(@common-icons-sprite) no-repeat 0px -40px;
    width: 40px;
    height: 40px;
  }

  .settings-tab {
    .nav-pills:after {
      margin-bottom: 20px;
    }
    .nav-pills li {
      overflow: hidden;
      user-select: none;
      width: 100%;
      &:not(.active) {
        cursor: pointer;
      }
      &.active {
        & > a {
          background-color: @blue + 50%;
          color: @black;
        }
      }
      & > a {
        padding-left: 25px;
      }
    }
    .subtab-icon {
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -8px;
      z-index: 1;
      width: 15px;
      height: 15px;
    }
  }

  .subtab-item-enter {
    max-height: 0px;
    &.subtab-item-enter-active {
      max-height: 60px;
      transition: max-height 0.3s ease-in;
    }
  }
  .subtab-item-leave {
    max-height: 60px;
    &.subtab-item-leave-active {
      max-height: 0px;
      transition: max-height 0.3s ease-in;
    }
  }

  .logs-tab {
    .log-entries {
      > thead > tr > th, > tbody > tr > th, > tfoot > tr > th, > thead > tr > td, > tbody > tr > td, > tfoot > tr > td {
        border-top: 1px solid @gray + 98%;
      }
      tr {
        th {
          &.col-date {
            width: 135px;
          }
          &.col-level {
            width: 50px;
          }
        }
        td {
          &:first-child, &:nth-child(2) {
            white-space: nowrap;
          }
          &:nth-child(3) {
            font-family: monospace;
            white-space: pre-wrap;
            font-size: 90%;
            word-break: break-all;
          }
        }
        &.debug td {background-color: @light-green;}
        &.info td {background-color: @pale-blue;}
        &.notice td {background-color: @aquamarine;}
        &.warning td {background-color: @light-yellow;}
        &.error td {background-color: @light-red;}
        &.critical td {background-color: @rose;}
        &.alert td {background-color: @coral; color: @white;}
        &.emerg td {background-color: @emergency-red; color: @white;}
      }
      tfoot td {
        padding-bottom: 0;
        > div {
          height: 25px;
          overflow: hidden;
        }
      }
    }
    button.show-more-entries {
      padding-left: 0;
      padding-right: 0;
      margin-left: 5px;
    }
  }

  .actions-tab {
    .action-item {
      .panel {
        background-color: @tab-color + 20%;
        border: none;
        .panel-heading {
          background-color:  @tab-color + 10%;
          font-size: @base-font-size + 2px;
          border-bottom: 1px dotted @white;
          color: @base-text-color;
          .font-semibold;
          .text-emboss;
        }
      }
      .action-body {
        margin-bottom: 10px;
        input, select {
          margin-bottom: 10px;
        }
      }
      .action-item-description {
        margin-bottom: 5px;
      }
      &.action-update {
        > .panel {
          min-height: 150px;
        }
        select {
          width: 300px;
        }
        button {
          margin-right: 5px;
        }
      }
    }
  }
}

.plugins-page {
  h3 {margin-top: 0;}
  .detail-title span {color: @gray;}
  .plugin {
    padding: 20px;
    .row {margin-bottom: 5px;}
    &:nth-child(odd) {background: @light-blue;}
  }
}

// TABS

.tabs-box {
  @tab-height: 52px;
  @tab-icon-size: 40px;
  @tab-icons-sprite: "../img/tabs/tabs-icons-sprite.svg";
  width: 100%;
  height: @tab-height;
  overflow: hidden;
  .tabs {
    width: 95%;
    height: @tab-height;
    overflow: hidden;
    float: left;
    .cluster-tab {
      cursor: pointer;
      display: inline-block;
      width: 8.9%;
      height: @tab-height;
      background-color: @tab-color;
      border-radius: 4px 4px 0 0;
      border-bottom: 2px solid @base-dark-color;
      overflow: hidden;
      margin: 0;
      padding: 0;
      font-size: @base-font-size - 3;
      float: left;
      margin-right: 2px;
      color: @base-text-color;

      &:hover {
        background-color: @tab-color-hover;
        text-decoration: none;
      }
      &.active {
        background-color: @tab-color-active;
        border-bottom: 2px solid @tab-color-active;
        &:hover {
          background-color: @tab-color-active;
          border-bottom: 2px solid @tab-color-active;
        }
      }

      .label {
        display: block;
        text-align: center;
        line-height: 1;
        color: @base-text-color;
        cursor: pointer;
        font-size: @base-font-size - 3;
        margin-top: -6px;
        .font-semibold;
      }

      .icon {
        width: @tab-icon-size;
        height: @tab-icon-size;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
      }

      .tab-icon-sprite-index(@index) {
        .icon {
          background: url(@tab-icons-sprite) no-repeat 0 -@tab-icon-size * @index;
        }
        &:hover, &.active {
          .icon {
            background: url(@tab-icons-sprite) no-repeat -@tab-icon-size -@tab-icon-size * @index;
          }
        }
      }

      &.nodes {
        .tab-icon-sprite-index(0);
      }
      &.network {
        .tab-icon-sprite-index(1);
      }
      &.settings {
        .tab-icon-sprite-index(2);
      }
      &.logs {
        .tab-icon-sprite-index(3);
      }
      &.healthcheck {
        .tab-icon-sprite-index(4);
      }
      &.actions {
        .tab-icon-sprite-index(5);
      }
      &.vmware {
        .tab-icon-sprite-index(6);
      }
      &.dashboard {
        .tab-icon-sprite-index(8);
      }
    }
  }
}

.tab-scroller {
  @tab-scroller-width: 28px;
  @tab-scroller-height: 50px;
  float: right;
  width: 5%;
  height: @tab-scroller-height;
  overflow: hidden;
  .arrow {
    display: inline-block;
    width: @tab-scroller-width;
    height: @tab-scroller-height;
    float: left;
    opacity: 0.7;
    background: url(../img/tabs/tab-arrow-left-icon.svg) no-repeat top left;
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
    &.disabled  {
      opacity: 0.3;
      cursor: default;
    }
    &.left {
      background: url(../img/tabs/tab-arrow-left-icon.svg) no-repeat top left;
    }
    &.right {
      background: url(../img/tabs/tab-arrow-right-icon.svg) no-repeat top left;
    }
  }
}

.tab-content {
  border-radius: 0 8px 8px 8px;
}

.sticker label {
  width: 100%;
}

.node-management-panel {
  @management-panel-indent: 5px;

  .view-mode-switcher {
    margin-right: @management-panel-indent * 3;
    float: left;
    .btn-group label {
      width: auto;
      font-size: @base-font-size;
    }
  }

  .node-list-management-buttons {
    margin-bottom: @management-panel-indent * 3;
    button.btn {
      margin-right: @management-panel-indent;
      &.btn-labels {
        margin-right: @management-panel-indent * 3;
      }
    }
    .search {
      min-width: 310px;
      position: relative;
      .form-group {
        margin: 0;
      }
      input {
        padding-right: 30px;
      }
      .btn-clear-search {
        margin: 0;
        padding: 6px 10px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }

  .view-mode-switcher .btn-group label, .node-list-management-buttons button {
    padding: 7px 10px 3px;
  }

  .well {
    margin-bottom: @management-panel-indent * 3;
    .well-heading {
      margin-bottom: @management-panel-indent;
      .font-semibold;
      .btn-link {
        padding: 0;
      }
    }
    .multiselect {
      &:last-child .btn-link {
        padding-left: @management-panel-indent;
      }
    }
    .control-buttons {
      float: none;
      margin: 0;
    }
  }

  .help-block {
    display: none;
  }

  .active-sorters-filters {
    border-radius: @management-panel-indent;
    border: 1px solid @gray + 80%;
    padding: @management-panel-indent * 2;
    margin-bottom: @management-panel-indent * 3;
    cursor: pointer;
    .active-sorters, .active-filters {
      position: relative;
      > div {
        padding-right: 40px;
        > div {
          margin-right: @management-panel-indent;
          display: inline;
        }
      }
      > strong {
        padding-right: 0;
      }
      button {
        padding: 0;
        position: absolute;
        top: 0;
        right: @management-panel-indent * 3;
      }
      &.active-filters {
        margin-bottom: @management-panel-indent * 2;
      }
    }
  }

  .form-group:not(.checkbox-group) label {
    width: 60px;
    margin: 8px 5px 0 0;
    float: left;
    &:empty {
      display: none;
    }
  }

  .control-buttons-box {
    margin-bottom: @management-panel-indent * 3;
    overflow: hidden;
    .btn-group {
      margin-left: @management-panel-indent;
      .glyphicon {
        margin-right: @management-panel-indent;
      }
    }
  }

  .filter-group {
    margin-bottom: @management-panel-indent;
    &:first-child {
      margin-top: @management-panel-indent * 2;
    }
    &:last-child {
      margin-bottom: @management-panel-indent * 3;
      position: relative;
    }
    .form-group {
      margin-right: @management-panel-indent;
    }
    .glyphicon {
      margin-right: @management-panel-indent;
      &.glyphicon-plus-sign {
        position: relative;
        top: 7px;
      }
    }
  }

  .sorter-control, .filter-control {
    margin-right: @management-panel-indent;
    .glyphicon {
      padding-left: @management-panel-indent;
    }
  }
  .sorters {
    .form-control {
      width: auto;
      float: left;
    }
  }

  .labels {
    p {
      color: @base-text-color + 50%;
      & + div {
        margin-top: @management-panel-indent * 3;
      }
      strong {
        text-decoration: underline;
      }
    }
    .forms-box {
      margin-top: @management-panel-indent * 3;
      margin-bottom: 0;
      .checkbox-group {
        padding: 0;
        margin: 0;
        position: relative;
        top: 7px;
        width: 25px;
      }
      > div + .btn-add-label {
        margin-top: @management-panel-indent;
        margin-left: 35px;
      }
      .form-group {
        margin-bottom: @management-panel-indent;
        padding-right: 0;
        position: relative;
        label {
          width: auto;
          padding: 0;
          padding-left: 13px;
          margin: 0 0 3px;
          .font-semibold;
        }
        &.has-warning {
          label .glyphicon {
            position: absolute;
            left: @default-input-width + 15;
            top: 12px;
          }
          .form-control {
            border-color: @orange;
          }
        }
      }
      .has-label {
        .checkbox-group {
          top: 31px;
        }
        .has-warning label .glyphicon {
          top: 32px;
        }
      }
    }
  }
}

.multiselect, .number-range {
  .popover {
    display: block;
    width: 210px;
    top: 25px;
    .arrow {
      display: none;
    }
  }

  &.multiselect {
    .popover-content {
      > div {
        padding: 0 5px;
        .custom-tumbler + span {
          cursor: pointer;
          position: relative;
          top: 3px;
        }
        label {
          .font-normal;
          font-size: @base-font-size - 2;
        }
        &.divider {
          border-bottom: 1px solid @gray + 80%;
          margin: 8px 0 10px;
        }
      }
    }
  }

  &.number-range {
    .popover {
      span {
        padding-top: 6px;
        display: inline-block;
        margin: 0 5px;
      }
      .form-group {
        float: left;
        .form-control {
          width: 76px;
          margin: 0;
        }
        .help-block {
          display: none;
        }
      }
    }
  }
}


// NODE LIST

.node-list {

  .select-all {
    label {
      display: inline-block;
      position: relative;
      top: 1px;
      .font-normal;
    }
  }
  .node-list-header .select-all {
    margin: 0 21px 8px 7px;
  }

  .nodes-group {
    @node-indent: 20px;
    @node-height: 58px;
    @node-inner-height: @node-height - 6;
    @node-border-radius: 4px;
    @node-button-size: 40px;

    border: 1px solid @gray + 80%;
    border-radius: @node-border-radius;
    padding: @node-indent;
    padding-bottom: 0;
    margin-bottom: @node-indent;
    box-sizing: border-box;

    h4 {
      margin: 0 0 @node-indent 0;
    }

    .node {
      height: @node-height;
      margin-bottom: 5px;
      overflow: visible;
      padding: 2px 2px 0;
      font-size: @base-font-size - 2;
      border: 1px solid @base-node-border;
      border-radius: @node-border-radius;
      box-shadow: inset 0 0 0 1px @white;
      background-color: @base-node-color;
      box-sizing: border-box;

      &.discover {
        background-color: @node-color-discover;
        border-color: @node-border-color-discover;
        &:hover {
          background-color: @node-color-discover-hover;
        }
      }
      &.error {
        background-color: @node-color-error;
        border-color: @node-border-color-error;
      }
      &.pending_addition {
        background-color: @node-color-pending_addition;
        border-color: @node-border-color-pending_addition;
      }
      &.offline {
        background-color: @node-color-offline;
        border-color: @node-border-color-offline;
        opacity: .7;
      }
      &.selected {
        background-color: @node-color-selected;
        border-color: @node-border-color-selected;
        box-shadow: inset 0 0 0 0px #c3c5c7;
      }

      .node-box {
        display: block;
        font-weight: 100;
        cursor: pointer;
        margin-bottom: 0;
        position: relative;
        box-sizing: border-box;
        > div {
          float: left;
          height: @node-inner-height;
          overflow: hidden;
          box-sizing: border-box;
          > div {
            overflow: hidden;
            box-sizing: border-box;
          }
        }

        .checkbox-group {
          width: @node-inner-height;
          border-right: 1px dotted @base-node-color - 60%;
          .custom-tumbler {
            margin: 14px;
          }
        }

        .node-name {
          width: 30%;
          .name {
            height: 31px;
            padding-top: 8px;
            .form-group {
              label {
                display: none;
              }
              input {
                width: 80%;
              }
            }
          }
          p {
            display: inline;
            line-height: 1px;
            border-bottom: 1px dotted @base-text-color + #444444;
            font-size: @base-font-size + 1;
            .text-emboss;
            .font-semibold;
            &:hover {
              color: @link-color-hover;
              border-bottom-color: @link-color-hover;
            }
          }
        }

        .node-action {
          width: @node-button-size * 2;
          margin-top: 6px;
          .icon {
            display: inline-block;
            height: @node-button-size;
            width: @node-button-size;
            background: url(@common-icons-sprite) no-repeat -@node-button-size -@node-button-size;
            opacity: .6;
            &:hover {
              opacity: 1;
            }
            &.icon-logs {
              background: url(@common-icons-sprite) no-repeat 0 -@node-button-size*5;
            }
          }
        }

        .node-text-mixin {
          padding: 18px 0;
          font-size: @base-font-size - 3;
        }

        .node-status {
          width: 20%;
          text-align: center;
          .font-semibold;
          .node-text-mixin;
          span {
            display: inline-block;
            text-transform: uppercase;
          }
          .node-remove-button {
            font-size: @base-font-size - 2;
            margin-left: 5px;
            padding: 0 5px;
          }
          .progress-bar {
            min-width: 32px;
          }
        }

        .node-hardware {
          text-align: right;
          float: none;
          margin-right: @node-button-size;
          .node-text-mixin;
          > span {
            padding-left: 5px;
          }
        }

        .node-settings {
          width: @node-button-size;
          margin-top: 6px;
          float: none;
          position: absolute;
          right: 0;
          top: 0;
          background: url(@common-icons-sprite) no-repeat 0 0;
          &:hover {
            background: url(@common-icons-sprite) no-repeat -@node-button-size 0;
          }
        }

        .node-labels {
          width: 5%;
          padding-top: 15px;
          position: relative;
          overflow: visible;
          .node-labels-popover {
            display: block;
            overflow: visible;
            top: 35px;
            left: -14px;
            width: 150px;
            word-break: break-all;
            .arrow {
              left: 22px;
            }
            ul {
              padding: 0;
              margin: 0;
            }
          }
          .btn-link {
            padding: 0;
            color: @blue;
            font-size: @base-font-size - 2;
            &:hover, &:focus {
              text-decoration: none;
            }
            .font-normal;
            span {
              position: relative;
              top: -2px;
              left: 3px;
            }
          }
        }
      }
    }

    /* override node styles for compact panel */
    .compact-node {
      @compact-node-indent: 5px;

      width: 20%;
      float: left;
      position: relative;
      padding: 0;
      padding-right: @compact-node-indent;

      .unavailable .node-box {
        cursor: default;
      }

      .node {
        height: @node-height * 1.25;

        .node-box > div {
          float: none;
        }

        .node-name{
          height: 18px;
          word-break: break-all;
          p {
            border: none;
          }
        }

        .node-box-inner {
          height: @node-height * 0.75;
          padding: @compact-node-indent;
          .node-name {
            width: auto;
            p:hover {
              color: @base-text-color;
            }
          }
          .node-status {
            width: auto;
            padding: 0;
            text-align: left;
            .progress {
              margin: 2px 0;
              height: 12px;
            }
          }
        }

        .node-buttons {
          float: left;
          height: 100%;
          width: 23px;
          i.glyphicon {
            font-size: @base-font-size + 4;
          }
        }

        .node-hardware {
          @node-hardware-height: 25px;
          height: @node-hardware-height;
          padding: 0;
          margin: 0;
          text-align: center;
          border-top: 1px dashed @gray + 40%;
          overflow: hidden;
          .font-semibold;
          p {
            margin: 0;
            padding: 4px 0;
            display: block;
            transition: all 0.3s ease-out;
            &.btn-link {
              font-size: @base-font-size - 2;
              text-decoration: none;
            }
          }
          &:hover {
            transition: all 0.3s ease-out;
            /* toggle More Info label */
            p:not(.btn-link) {
              margin-top: -@node-hardware-height;
            }
          }
        }

        /* lighten compact node panel color on hover */
        &:not(.unavailable) {
          .lighten-node-panel(@color) {
            &, & + .node-hardware {
              background-color: @color + 10%;
            }
          }

          & .node-box-inner:hover {
            .lighten-node-panel(@base-node-color)
          }
          &.discover .node-box-inner:hover {
            .lighten-node-panel(@node-color-discover-hover)
          }
          &.error .node-box-inner:hover {
            .lighten-node-panel(@node-color-error)
          }
          &.pending_addition .node-box-inner:hover {
            .lighten-node-panel(@node-color-pending_addition)
          }
          &.offline .node-box-inner:hover {
            .lighten-node-panel(@node-color-offline)
          }
          &.selected .node-box-inner:hover {
            .lighten-node-panel(@node-color-selected)
          }
        }

      }

      .node-popover {
        top: -@node-height;
        left: -25%;
        background: @base-node-color + 15%;
        border-radius: @node-border-radius;
        width: 150%;
        max-width: none;
        display: block;
        font-family: @open-sans-font;
        animation-name: bounceIn;
        animation-duration: 0.2s;
        animation-fill-mode: both;
        animation-timing-function: linear;
        .arrow, .help-block {
          display: none;
        }

        .popover-content {
          padding: 0;
          > div > div {
            padding: @compact-node-indent * 2;
            border-bottom: 1px dashed @gray + 40%;
            &:last-child {
              border: none;
            }
            &.hardware-info {
              padding-top: 0;
              padding-bottom: 0;
            }
          }
        }

        .node-name {
          .font-bold;
          .checkbox-group {
            label {
              margin: 0;
            }
          }
          .name {
            width: 90%;
            .break-word;
            label {
              display: none;
              margin: 0;
            }
            .form-group {
              position: relative;
              top: 1px;
              margin: 0;
            }
            p {
              border-bottom: 1px dotted @base-text-color + #444444;
              cursor: pointer;
              display: inline;
              &:hover {
                color: @link-color-hover;
                border-bottom-color: @link-color-hover;
              }
            }
          }
        }

        .role-list {
          li {
            color: @base-text-color;
          }
        }

        .hardware-info {
          .manufacturer-logo {
            height: 50px;
            float: left;
          }
          .node-hardware {
            float: left;
            font-size: @base-font-size - 2;
            padding: 17px 0 0;
            .font-semibold;
            color: @base-text-color + 50%;
            > span {
              margin-right: @compact-node-indent * 2;
            }
          }
        }

        .node-stats {
          @node-icon-width: 28px;
          .font-semibold;
          .glyphicon {
            float: left;
            width: @node-icon-width;
            color: @gray;
            top: 4px;
            left: 2px;
            + div {
              margin-left: @node-icon-width;
            }
          }
          .role-list {
            font-size: @base-font-size - 2;
            margin-bottom: @compact-node-indent;
            ul {
              margin: 0;
              margin-left: @node-icon-width;
            }
          }
          .node-status {
            text-transform: uppercase;
            font-size: @base-font-size - 2;
            span {
              padding-right: @compact-node-indent;
            }
            .btn {
              padding: 2px 5px 0;
              margin: 0 2px 2px;
              margin-left: 0;
              color: @white;
              .font-bold;
              .text-shadow;
              font-size: @base-font-size - 4;
              background: @blue;
              line-height: 1.5;
              text-transform: uppercase;
            }
          }
          .progress {
            margin: 0;
          }
        }
      }
    }

    .node-name-input {
      height: 20px;
      font-size: @base-font-size - 2;
      padding: 0 4px;
      border-radius: 3px;
      .font-normal;
    }

    .manufacturer-logo {
      width: @node-inner-height;

      .node-logo(@manufacturer) {
        background: url("../img/logos/@{manufacturer}-logo.svg") no-repeat top left;
      }
      &.cisco {.node-logo(cisco);}
      &.vbox {.node-logo(vbox);}
      &.vmware {.node-logo(vmware);}
      &.hp {.node-logo(hp);}
      &.xen {.node-logo(xen);}
      &.openvz {.node-logo(openvz);}
      &.kvm {.node-logo(kvm);}
      &.supermicro {.node-logo(supermicro);}
      &.qemu {.node-logo(qemu);}
    }

    .role-list {
      font-size: @base-font-size - 4;
      text-transform: uppercase;
      line-height: 10px;
      color: @gray;
      .font-semibold;
      ul {
        padding: 0;
        display: inline;
        li {
          display: inline-block;
          float: left;
          margin-right: 5px;
          &:after {
            content: "·";
            margin-left: 3px;
            color: @gray;
          }
          &:last-child:after {
            content: "";
          }
        }
      }
    }

    .node-labels {
      text-align: left;
      ul {
        padding-left: 28px;
      }
      .glyphicon {
        font-size: @base-font-size - 2;
      }
      .label {
        border-radius: 5px;
        text-transform: uppercase;
        display: inline-block;
        background-color: #d2d5d6;
        font-size: @base-font-size - 4;
        .font-semibold;
        color: @base-text-color;
        font-family: @open-sans-font;
        padding: 4px 6px;
        margin: 0 3px 2px 0;
        white-space: normal;
        text-align: left;
      }
    }
  }

  &.compact .nodes-group {
    > .row:not(.node-group-header) {
      margin-right: -20px;
    }
  }
}

.well .form-group {
  margin-bottom: 0;
}

// CLUSTERS PAGE

.login-page {
  @login-indent: 20px;
  .login-box {
    position: relative;
    background-color: @white;
    color: @base-text-color;
    border-radius: 18px;
    margin-top: 10%;
    box-shadow: 0 1px 1px @shadow-color;
  }

  .login-logo-circle {
    @logo-circle-size: 160px;
    background-color: @white;
    position: relative;
    width: @logo-circle-size;
    height: @logo-circle-size;
    top: -@logo-circle-size / 2;
    border-radius: @logo-circle-size / 2;
    margin: 0 auto;
  }

  .login-logo {
    @logo-width: 200px;
    @logo-height: 260px;
    background: url(../img/fuel-big-logo.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
    position: relative;
    top: -@logo-height + @login-indent;
    width: @logo-width;
    height: @logo-height;
    margin: 0 auto -(@logo-height - 40px) auto;
  }

  .login-fields-box {
    height: 200px;
    overflow: hidden;
    padding-top: 10px;
    form {
      label {
        font-size: @base-font-size + 1;
        padding-top: 6px;
        padding-right: 0;
        text-align: right;
        .glyphicon {
          color: @gray;
        }
      }
    }
  }

  .login-btn {
    margin-top: @login-indent + 10;
    padding-left: @login-indent;
    padding-right: @login-indent;
  }

  .login-error {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
  }

  .login-footer {
    margin-top: @login-indent;
    font-size: 12px;
    color: @base-dark-color + 60%;
  }
}

.clusters-page {
  .clusterbox {
    display: block;
    width: 100%;
    height: 192px;
    background-color: @white;
    /* height: 200px; */
    border-radius: 6px;
    margin-bottom: 30px;
    padding: 16px;
    text-decoration: none;
    box-sizing: border-box;
    &:hover {
      background-color: @base-node-color;
      text-decoration: none;
      .name {
        color: @blue;
      }
    }
    .name {
      font-size: @base-font-size + 3;
      .font-semibold;
      text-decoration: none;
      height: 42px;
      overflow: hidden;
      color: #525960;
      line-height: 20px;
      word-break: break-all;
    }
    .tech-info {
      height: 80px;
      font-size: @base-font-size - 1;
      color: @gray;
      margin: 10px 0px 8px 0px;
      overflow: hidden;
      .item {
        width: 70%;
        float: left;
        &:after {
          content: ":";
        }
      }
      .value {
        width: 30%;
        float: left;
        text-align: right;
      }
    }
    .status {
      clear: both;
      border-top: 1px dotted @gray;
      text-align: center;
      height: 20px;
      padding-top: 6px;
      box-sizing: border-box;
      .font-semibold;
    }
    &.cluster-disabled,
    &.cluster-disabled:hover,
    &.cluster-disabled > .name,
    &.cluster-disabled > .tech-info,
    &.cluster-disabled > .status {
      background-color: #78818a;
      cursor: default;
      color: @base-dark-color !important;
      text-decoration: none !important;
    }
  }

  .create-cluster {
    display: block;
    width: 100%;
    height: 192px;
    border-radius: 6px;
    margin-bottom: 30px;
    padding: 16px;
    text-decoration: none;
    background: url(../img/icons/new-environment.svg) no-repeat center 20px;
    text-align: center;
    color: @blue;
    text-decoration: none;
    box-sizing: border-box;
    .font-bold;
    &:hover {
      background: @white url(../img/icons/new-environment.svg) no-repeat center 20px;
      text-decoration: none;
      color: @blue;
    }
    span {
      display: block;
      margin-top: 132px;
    }
  }
}

.support-page {
  .support-box {
    display: block;
    width: 100%;
    height: auto;
    &:after {
      clear: both;
      display: table;
      content: " ";
    }
  }
  .support-box-cover {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    border: 3px solid #e0e0e0;
    float: left;
    box-sizing: border-box;

    @support-icon-background-color: #4e85aa;
    background: @support-icon-background-color;
    .support-icon-sprite-index(@index) {
        background: @support-icon-background-color url(../img/icons/support-images.svg) no-repeat 0 -120px * @index;
    }
    &.img-register-fuel {
      .support-icon-sprite-index(0);
    }
    &.img-statistics {
      .support-icon-sprite-index(1);
    }
    &.img-contact-support {
      .support-icon-sprite-index(2);
    }
    &.img-documentation-link {
      .support-icon-sprite-index(3);
    }
    &.img-download-logs {
      .support-icon-sprite-index(4);
    }
    &.img-audit-logs {
      .support-icon-sprite-index(5);
    }

  }
  .support-box-content {
    width: 100%;
    margin-left: -140px;
    padding-left: 140px;
    display: block;
    float: right;
    box-sizing: border-box;
    > h3 {
      margin-top: 0px;
    }
    > div {margin-bottom: 15px;}
    .snapshot button {
      margin-right: 10px;
    }
  }
  .connection-form {margin: 0;}
  .statistics-text-box button {
    padding: 0;
    margin-bottom: 10px;
  }
}

.capacity-page {
  .table {
    table-layout: fixed;
  }
}

.notifications-page {
  hr {
    margin: 10px 0;
  }
  .notification {
    &.unread {
      .font-semibold;
      cursor: pointer;
    }
    .glyphicon {
      margin-right: 10px;
    }
    .btn-link {
      padding: 0;
      border: 0;
    }
  }
}

// ANIMATIONS

@keyframes fade-cloud {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

.animate-spin {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


.role-panel {
  .checkbox-group {
    label {
      width: 100%;
      margin-bottom: 2px;
      padding-top: 2px;
      color: @base-text-color;
      cursor: pointer;
      .custom-tumbler {
        top: -1px;
      }
      .glyphicon {
        .text-warning;
        position: relative;
        top: -5px;
        left: 5px;
      }
    }
    &.disabled {
      label {
        cursor: default;
        color: @gray;
      }
    }
    .help-block {
      color: @gray;
      font-size: @base-font-size - 2;
      margin-left: 28px;
      margin-top: 0;
    }
  }
}

// wizard styles
#wizard {
  &.modal-dialog {
    width: 830px;
    height: 485px;
    .wizard-body {
      @wizard-body-height: 315px;
      @wizard-body-padding: 15px;
      height: @wizard-body-height;
      padding: @wizard-body-padding;
      padding-top: @wizard-body-padding - 5px;
      .wizard-steps-box {
        height: @wizard-body-height - @wizard-body-padding * 2;
        overflow: auto;
        .form-group {
          margin-right: 0;
        }
        .wizard-steps-nav {
          margin-top: 5px;
          padding-left: 0;
          li {
            cursor: pointer;
          }
          .wizard-step {
            &.available {
              a {
                color: @green;
              }
            }
          }
        }
        .pane-content {
          margin-top: 5px;
        }
      }
    }
  }
  label.parameter-box {
    cursor: pointer;
    padding-left: 0;
    margin-top: 5px;
    .parameter-name {
      padding-top: 2px;
      .font-semibold;
    }
  }
  .alert {
    margin: 10px 0;
    padding: 7px;
    line-height: 14px;
    font-size: @base-font-size - 2;
  }
  .pane-content > div > .alert {
    margin-top: 0;
  }
  .control-label {
    padding-left: 0;
    .font-semibold;
  }
  .has-error {
    .release-description,
    .mode-description,
    .modal-parameter-description,
    .help-block {
      color: @red;
    }
  }
  .release-description,
  .mode-description,
  .modal-parameter-description,
  .help-block {
    font-size: @base-font-size - 2;
    color: @gray;
    line-height: 14px;
  }
}

.modal {
  .modal-dialog {margin-top: 6%;}
  .modal-title {
    font-size: @base-font-size + 6px;
    color: @base-text-color;
    .font-normal;
  }
  .modal-body {
    span.label {
      margin-right: 5px;
      position: relative;
      top: -2px;
    }
  }
  .modal-footer {
    .btn-group {
      margin-left: 5px;
    }
  }
  &.always-show-scrollbar {
    overflow-y: scroll;
  }
}

.display-changes-dialog {
  hr {
    margin: 8px 0 12px 0;
  }
  .glyphicon {
    margin-right: 5px;
  }
  .text-warning {
    color: @base-text-color;
    margin-bottom: 15px;
  }
  .instruction {
    display: inline;
  }
  .confirmation-question {
    text-align: center;
    color: @base-text-color;
    .font-semibold;
  }
}

.node-details-popup {
  .node-image-outline {
    width: 200px;
    height: 58px;
    margin-top: 10px;
    background: url("../img/node-image.svg") no-repeat 0 0 transparent;
  }
  .change-hostname {
    button.glyphicon-pencil {
      margin-left: 5px;
      text-decoration: none;
      font-size: @base-font-size - 2;
    }
    .form-group {
      margin: 0;
      label {display: none;}
      .help-block {
        .break-word;
        margin-bottom: 0;
        font-size: @base-font-size - 2;
      }
    }
  }
  .panel-group {
    margin-top: 10px;
    font-size: @base-font-size - 2;
    .panel-heading {
      cursor: pointer;
    }
    .panel-title {
      font-size: @base-font-size;
    }
    .node-details-row label {
      text-transform: uppercase;
      width: 150px;
      word-break: break-all;
      .font-normal;
      margin: 0;
    }
    .nested-object {
      border: 1px solid @gray + 80%;
      border-radius: 3px;
      margin-top: 3px;
      padding: 4px;
      position: relative;
      left: -5px;
    }
    .vms-config {
      label {
        .font-normal;
      }
      textarea {
        min-height: 120px;
      }
    }
  }
}

// FORMS

.forms-box {
  @base-indent: 20px;

  margin-bottom: @base-indent * 1.5;
  h3 {
    padding-bottom: 6px;
    margin: 0 0 @base-indent * 1.5;
    border-bottom: 1px solid @gray + 50%;
    color: @base-text-color + 10%;
    box-sizing: border-box;
    font-size: @base-font-size + 7px;
    .font-normal;
    .checkbox-group {
      padding: 0;
      label {
        margin-bottom: -3px;
        .custom-tumbler {
          margin-right: 8px;
        }
      }
    }
  }
  h4 {
    margin: @base-indent * 1.5 0 @base-indent;
    font-size: @base-font-size + 5px;
    .font-normal;
  }
  label {
    color: @base-text-color;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1.5;
    .font-normal;
  }
  .help-block {
    font-size: @base-font-size - 2px;
    color: @gray + 25%;
    padding: 0;
    margin: 0;
    p {
      margin-bottom: 5px;
    }
  }
  .radio-group + .form-group, .radio-group + .checkbox-group {
    margin-top: @base-indent * 2;
  }
  .form-group {
    padding: 0 @base-indent / 2;
    margin-bottom: @base-indent;
    box-sizing: border-box;
    label {
      width: @default-label-width;
      float: left;
      padding: 6px 8px 0 0;
    }
    input, textarea {
      float: left;
    }
    input[type=file] {
      opacity: 0;
      position: absolute;
    }
    &:not(.disabled) input.file-name[readonly] {
      background-color: white;
      cursor: pointer;
    }
    input, textarea, select {
      max-width: @default-input-width;
      width: @default-input-width;
    }
    textarea {
      max-width: @default-input-width * 2;
    }
    .input-group {
      float: left;
      max-width: @default-input-width;
      @input-addon-width: 40px;
      input {
        width: @default-input-width - @input-addon-width;
      }
      .input-group-addon {
        width: @input-addon-width;
        height: 34px;
        cursor: pointer;
        float: left;
        padding: 8px;
      }
    }
    @help-block-width: @page-width - @default-input-width - @default-label-width - 90px;
    .help-block {
      max-width: @help-block-width;
      float: left;
      margin-left: 20px;
      padding-top: 9px;
      box-sizing: border-box;
    }
    .textarea + .help-block {
      max-width: @help-block-width - @default-input-width;
    }
    &.has-error .help-block {
      .text-danger;
    }
    &:after {
      .clearfix;
    }
  }
  .checkbox-group {
    padding-left: @base-indent / 2;
    margin-bottom: @base-indent;
    .custom-tumbler {
      margin-top: -1px;
    }
    .help-block {
      display: block;
      max-width: auto;
      margin-top: -4px;
      margin-left: 28px;
    }
  }
  .tooltip-icon {
    .text-warning;
    margin-left: 5px;
    font-size: @base-font-size + 2px;
  }

  // custom control styles
  .repos {
    margin-bottom: @base-indent;
    > .help-block {
      margin: 0 0 @base-indent @base-indent * 0.5;
    }
    .form-inline {
      margin-bottom: 5px;
      position: relative;
    }
    .form-group {
      margin: 0;
      .help-block {
        position: absolute;
        bottom: 10px;
        left: @default-input-width * 2.5 + @base-indent * 4 + 20px;
      }
      &.repo-uri .form-control {
        @repo-uri-width: @default-input-width * 1.1;
        width: @repo-uri-width;
        max-width: @repo-uri-width;
      }
      &.repo-priority .form-control {
        width: @default-input-width * 0.5;
      }
      .form-control-static {
        display: inline;
      }
    }
    .buttons {
      padding: @base-indent * 0.5 0 0 @base-indent * 0.5;
    }
  }
}

// Disks styles
.disk-box {
  @colors: green, blue, orange, gray, pure-red, black, red;
  .generate-colors(length(@colors));
  .generate-colors(@n, @i: 1) when (@i =< @n) {
    .volume-type-@{i} {
      @color: extract(@colors, @i);
      background: @@color;
    }
    .generate-colors(@n, (@i + 1));
  }

  label {.font-semibold;}

  .disk-visual {
    @disk-visual-block-height: 50px;
    @disk-visual-block-padding: 4px;
    height: @disk-visual-block-height;
    color: @white;
    .text-shadow;
    .font-semibold;
    div {
      overflow: hidden;
    }
    .volume-group {
      position: relative;
      > div {
        padding: @disk-visual-block-padding;
        > div {
          height: @disk-visual-block-height / 2 - @disk-visual-block-padding;
        }
      }
      .close-btn {
        position: absolute;
        z-index: 1000;
        top: 0;
        right: @disk-visual-block-padding;
        cursor: pointer;
        font-size: @base-font-size + 2px;
        .font-bold;
      }
      &[data-volume=unallocated] {
        background: linear-gradient(to bottom, #aaa 0%, #ddd 100%);
      }
    }
  }
  .disk-details {
    background: @gray + 95%;
    border: 1px solid @gray + 20%;
    .disk-info-box {
      .form-group {
        margin-bottom: 0;
        label {text-transform: capitalize;}
        p {padding: 0;}
      }
    }
    .disk-utility-box {
      @disk-form-margin: 5px;
      .form-group {
        margin: 0;
        .volume-group-flag {
          display: inline-block;
          width: 10px;
        }
        .volume-group-input {
          padding-right: @disk-form-margin;
        }
        .volume-group-range, .volume-group-input {
          label, .help-block {display: none;}
        }
        .volume-group-label {
          margin: 0;
          padding-top: @disk-form-margin;
        }
        .volume-group-size-label {
          padding: @disk-form-margin;
          text-align: right;
        }
        input[type=range] {
          /*fix for FF unable to apply focus style bug */
          border: 1px solid transparent;
          margin-top: @disk-form-margin;
          &:focus {outline: none;}
          &:focus::-webkit-slider-runnable-track {background: transparent;}
          &:disabled {opacity: 0.4;}
        }
        input[type=number] {
          position: relative;
          top: -2px;
        }
      }
      .volume-group {margin-bottom: @disk-form-margin;}
      .volume-group-notice {
        font-size: @base-font-size - 2px;
        color: @blue;
        margin: 0 @disk-form-margin @disk-form-margin * 2 0;
      }
    }
  }
}

.node-disks + .page-buttons {
  margin-top: 30px;
}

// Interfaces styles

.ifc-list {
  .ifc-container {
    @base-ifc-indent: 5px;
    margin-bottom: @base-ifc-indent * 2;

    .ifc-inner-container {
      @ifc-container-dark-color: @gray + 20%;
      @ifc-container-light-color: @gray + 95%;

      background: @ifc-container-light-color;
      border: 1px solid @ifc-container-dark-color;
      padding: 0;
      margin: 0 0 @base-ifc-indent * 2;

      &.nodrag {
        background-color: #f2dede;
        border-color: @red;
      }

      &.over {
        background-color: @ifc-container-light-color + 10%;
        border-color: @ifc-container-dark-color + 10%;
      }

      > div {
        padding: @base-ifc-indent 0;
        margin: 0;
      }

      .form-group {
        input, select {
          width: 150px;
        }
        &.pull-right > div {
          float: left;
        }
      }
      .checkbox-group {
        label {
          padding-top: 5px;
        }
      }
      .form-group, .checkbox-group {
        margin-bottom: 0;
        label {
          width: auto;
          .font-semibold;
        }
        .help-block {
          display: none;
        }
      }

      .ifc-info-block {
        margin-bottom: @base-ifc-indent;
        &:last-child {
          margin-bottom: 0;
        }
        .ifc-connection {
          border-radius: @base-ifc-indent;
          background: @gray + 40%;
          padding: @base-ifc-indent;
          margin-right: @base-ifc-indent;
          text-align: center;
          .ifc-name {
            .text-shadow;
            .font-semibold;
            color: @ifc-container-light-color;
            line-height: 1;
          }
          .ifc-connection-status {
            @ifc-connection-status-size: 40px;
            height: @ifc-connection-status-size;
            width: @ifc-connection-status-size;
            &.ifc-online {
              background: url(@common-icons-sprite) no-repeat 0 -160px;
            }
            &.ifc-offline {
              background: url(@common-icons-sprite) no-repeat -40px -160px;
            }
          }
        }
        .ifc-info, .ifc-info .btn-link {
          padding: 0;
          border: 0;
          line-height: 1.1;
        }
      }

      .bond-properties {
        border-bottom: 1px dotted @ifc-container-dark-color;
      }
      .ifc-properties {
        border-top: 1px dotted @ifc-container-dark-color;
        .checkbox-group {
          text-align: right;
          .custom-tumbler {
            float: right;
            margin: 0 10px 0 7px;
          }
        }
        .toggle-offloading {
          margin-left: 50px;
        }
      }
      // Offline modes control
      .offloading-modes {
        margin: 0 10px 0 50px;
        .btn-default .glyphicon {
          margin-left: 4px;
          &.glyphicon-question-sign {
            color: darkgrey;
          }
        }
        .table {
          margin-bottom: 0;
          tr {
            @mode-indent: 15px;
            .indent-levels(@n, @i: 2) when (@i =< @n) {
              &.level@{i} td:first-child {
                padding-left: (@i * @mode-indent);
              }
              .indent-levels(@n, (@i + 1));
            }
            .indent-levels(4);

            &.level1 {
              font-weight: 600;
            }
          }

          th:nth-child(n+2) {
            width: 70px;
            text-align: center;
          }
          td {
            &:nth-child(n+2) {
              text-align: center;
            }

            .btn-link {
              border: 0;
              padding: 0;
              opacity: 0.1;
              color: black;
              &.active, &:hover {
                opacity: 1;
              }
            }
          }
        }
      }

      .networks-block {
        padding: @base-ifc-indent * 2 0 @base-ifc-indent;
        > div {
          padding: 0;
        }
        .ifc-checkbox {
          width: 50px;
          text-align: center;
          .custom-thumbler {
            margin: 0;
          }
        }
        .ifc-networks {
          @network-block-width: 120px;
          @network-block-height: @network-block-width / 2;

          min-height: @network-block-height + @base-ifc-indent;
          margin-right: 5px;

          .network-block {
            width: @network-block-width;
            height: @network-block-height;
            text-align: center;
            border-box: sizing;
            background: linear-gradient(to bottom, #ddd 0%, #b4b4b4 100%);
            margin-left: @base-ifc-indent;
            margin-bottom: @base-ifc-indent;
            padding: @base-ifc-indent * 2 @base-ifc-indent @base-ifc-indent;
            cursor: move;
            box-shadow: inset 0 0 0 1px @white;
            border: 1px solid @ifc-container-dark-color;
            .network-name {
              text-transform: capitalize;
              .text-shadow;
            }
            .vlan-id {
              font-size: @base-font-size - 3px;
            }

            &.disabled {
              cursor: not-allowed;
              background: linear-gradient(to bottom, #eee 0%, #ddd 100%);
              .network-name {
                opacity: 0.7;
              }
            }
            &.dragging {
              opacity: 0.5;
            }
          }
        }
      }
    }

    .ifc-error {
      margin: @base-ifc-indent 0;
      font-size: @base-font-size - 2px;
      text-align: right;
      .text-danger;
    }
  }
}

// Healthcheck tab
.healthcheck-tab {
  @padding-top-controls: 10px;
  .healthcheck-controls {
    margin: 2px 0 @padding-top-controls 0;
    padding-bottom: 0;
    padding-left: 7px;
    .toggle-credentials {
      margin-right: 10px;
      .provide-credentials {
        padding-left: 5px;
      }
    }
    .select-all {
      margin-top: 14px;
      label {
        cursor: pointer;
        > span {
          margin-left: 10px;
        }
      }
    }
    .btn {
      margin-top: 8px;
      margin-bottom: 15px;
    }
  }
  .credentials {
    .alert {
      margin-left: -15px;
      margin-right: -15px;
    }
  }
  .healthcheck-table {
    tr {
      td {
        &.healthcheck-name,
        &.healthcheck-col-duration,
        &.healthcheck-col-status {
          padding-top: @padding-top-controls;
        }
        &.healthcheck-col-duration,
        &.healthcheck-col-status {
          line-height: 35px;
        }
        label {
          cursor: pointer;
          font-weight: normal;
          line-height: 35px;
          margin: 0;
        }
        .custom-tumbler {
          span {
            margin-top: @padding-top-controls - 2;
          }
        }
        .well {
          margin: 10px 0;
        }
      }
      th {
        .font-semibold;
        text-align: center;
        &.healthcheck-name {
          text-align: left;
        }

        &.healthcheck-name,
        &.healthcheck-col-duration,
        &.healthcheck-col-status {
          line-height: 25px;
        }
        .custom-tumbler {
          span {
            margin-top: @padding-top-controls + 8;
          }
        }
      }
    }
    .custom-tumbler {
      margin: 0;
      span {
        margin-top: @padding-top-controls;
        cursor: pointer;
      }
    }
    tbody {
      .healthcheck-col-duration,
      .healthcheck-col-status {
        text-align: center;
        .glyphicon {
          vertical-align: middle;
        }
      }
    }
  }
}

// Networks tab
.network-tab {
  @base-indent: 10px;
  .forms-box {
    margin-left: 16px;
    margin-right: 15px;
  }
  .network-section-wrapper {
    margin-left: -@base-indent;
  }
  .nova-managers {
    margin: @base-indent * 2 0 @base-indent * 2 -@base-indent;
  }
  .network-sub-wrapper {
    margin-bottom: @base-indent * 1.5;
  }

  // range
  .range,
  .multiple-values {
    .rows-container {
      margin-top: -@base-indent;
    }
    .range-row-header {
      .font-bold;
      font-size: @base-font-size - 2;
      padding-left: @default-label-width + 29;
      div {
        float: left;
        // needed here to place label on correct places over ranges
        width: @default-input-width + 20;
      }
    }
    label {
      // needed here to control the situation with looooooong label
      width: @default-label-width;
      padding-top: @base-indent;
    }
    &.form-group {
      margin-bottom: @base-indent / 2;
    }
    &.mini {
      @mini-width: 125px;
      .range-row-header {
        div {
          // needed here to place label on correct places over ranges
          width: @mini-width + 30;
        }
      }
      .range-row {
        margin-top: -@base-indent * 5;
        padding-left: 0;
        &.offset-left {
          margin-left: @default-label-width - 5;
        }
        input {
          // mini range requires special style
          width: @mini-width;
        }
        .validation-error {
          margin-top: 19px;
          span {
            margin-left: -5px;
          }
        }
        .form-group {
          margin-top: 0;
          // mini range requires special style
          width: @mini-width + 15;
          margin-left: @base-indent / 2;
        }
      }
    }
    &.dns_nameservers {
      margin-bottom: 0;
      padding-left: 0;
      margin-left: 0;
      margin-top: -@base-indent * 3;
      label {
        margin-left: 0;
      }
      .dns_nameservers-row {
        .range-row {
          &.first {
            .form-group {
              margin-top: -@base-indent;
              padding-left: 0;
            }
            .validation-error {
              margin-top: @base-indent;
            }
          }
          .form-group {
            margin-bottom: 0;
            padding-left: @base-indent;
          }
          .glyphicon {
            margin-top: @base-indent + 5;
          }
          &.offset-left {
            margin-left: @default-label-width - 10;
          }
        }
        .validation-error {
          margin-top: @base-indent * 2;
          span {
            font-size: @base-font-size - 2;
            margin-left: 10px;
          }
        }
        .ip-ranges-control {
          margin-top: -@base-indent * 1.5;
        }
      }
    }
    .range-row {
      .glyphicon {
        margin-left: -7px;
        margin-right: -3px;
      }
      .form-group {
        margin-bottom: @base-indent;
        float: left;
      }
      &.offset-bottom {
        margin-bottom: @base-indent;
      }
      &.offset-left {
        margin-left: @default-label-width;
      }
      &.padding-left {
        padding-left: 12px;
      }
      .validation-error {
        margin-top: 9px;
        span {
          font-size: @base-font-size - 2;
        }
      }
      .ip-ranges-control {
        float: left;
        .ip-ranges-add {
          margin-left: @base-indent;
        }
      }
    }
  }
  .range {
    .range-row {
      .form-group {
        margin-top: -@base-indent;
        padding-left: 0;
        margin-right: 10px;
      }
    }
    .no-controls {
      // to pull validation error closer to inputs
      width: 330px;
    }
  }
  //vlan tag control
  .vlan-tagging {
    height: 40px;
    > label.vlan-tag-label {
      // needed to preserve style of title which is overridden below
      width: @default-label-width;
    }
    // label for checkbox
    label {
      // which is overridden here for hiding label
      width: auto;
    }
    input[type=text] {
      margin-left: -@base-indent * 4;
      // to fit the width of other controls
      width: 248px;
    }
    .checkbox-group {
      padding-left: 0;
      margin-bottom: 0;
      margin-left: @default-label-width;
      label span {
        padding-right: 0;
      }
      .custom-tumbler {
        input[type='checkbox'] {
          // to pull cursor pointer only to checkbox
          width: auto;
        }
      }
    }
  }
  .neutron-l2-3-config {
    margin-bottom: @base-indent * 3;
  }

  // Verification Block
  // -------------------------
  .verification-control {
    // Verification block mixin
    .connect-stop-mixin(@width, @height, @margin-left) {
      display: inline-block;
      width: @width;
      height: @height;
      margin-left: @margin-left;
      overflow: hidden;
    }

    .connect-size {
      width: 140px;
      height: 40px;
    }

    @connect-url-1: url(../img/connect_1_anim.gif);
    @connect-url-2: url(../img/connect_2_anim.gif);
    @connect-url-3: url(../img/connect_3_anim.gif);

    @connect-height: 62px;
    @connect-width: 124px;

    .verification-box {
      display: block;
      margin: @base-indent 0;
      position: relative;
      .alert {
        clear: left;
        margin-bottom: 0;
        margin-top: @base-indent;
        padding: 8px 35px @base-indent 14px;
        width: 100%;
      }
    }
    .verification-network-placeholder {min-width: 605px;}
    .verification-text-placeholder {
      padding-left: 0;
      li:first-of-type {
        .font-bold;
      }
      li {
        list-style: none outside none;
        margin: 2px 0 8px 0;
        line-height: 17px;
      }
    }
    .verification-result-table {
      clear: both;
      padding-top: @base-indent;
      td:last-child {
        word-break: break-all;
      }
    }
    .verification-router {
      display: block;
      // needed for image
      width: 200px;
      height: 58px;
      margin-left: @default-label-width - 10;
      background: url(../img/router.png) no-repeat top left;
    }

    .verification-node-1 {
      display: inline-block;
      .connect-size;
    }
    .verification-node-2, .verification-node-3 {
      .verification-node-1;
      margin-left: 76px;
    }

    .generate-verification-node(@number-of-iterations, @index: 1) when (@index =< @number-of-iterations) {
      .verification-node-@{index} {
        background: url(../img/node-small.png) no-repeat top left;
      }
      .generate-verification-node(@number-of-iterations, (@index + 1));
    }

    .generate-connect(@number-of-iterations, @position-horizontal, @position-vertical, @index: 1) when (@index =< @number-of-iterations) {
      &.connect-@{index} {
        background-image: url('../img/connect_@{index}_anim.gif');
        background-position: @position-horizontal @position-vertical;
        background-repeat: no-repeat;
      }
      .generate-connect(@number-of-iterations, @position-horizontal, @position-vertical, (@index + 1));
    }

    .generate-verification-node(3);

    .error,
    .success,
    .stop {
      &.connect-1 {
        .connect-stop-mixin(176px, @connect-height, @connect-height);
      }
      &.connect-2 {
        .connect-stop-mixin(8px, @connect-height, 49px);
      }
      &.connect-3 {
        .connect-stop-mixin(176px, @connect-height, 49px);
      }
    }

    .success {
      .generate-connect(3, 0, -@connect-height);
    }

    .stop {
      .generate-connect(3, top, left);
    }

    .error {
      .generate-connect(3, 0, -@connect-width);
    }

    .router-box {
      display: block;
      height: 58px;
      overflow: hidden;
    }
    .animation-box {
      display: block;
      height: @connect-height;
      margin-top: -9px;
      overflow: hidden;
    }
  }
}

.capacity table {
  table-layout: fixed;
}

.confirm-deletion-form, .confirm-reset-form {
  margin-top: 20px;
  .input-wrapper input {
    width: 513px;
    margin-top: 10px;
  }
}

.btn-link.glyphicon {
  padding-left: 0;
  &:hover {
    text-decoration: none;
  }
}

// Dashboard tab
.dashboard-tab {
  @cluster-info-background: #e7f0f2;
  @deploy-border: #d3d3d3;
  @dashboard-gray: rgb(153, 153, 153);
  @dashboard-offset: 10px;
  .btn-add-nodes {
    float: left;
    margin-top: @dashboard-offset;
    margin-bottom: @dashboard-offset;
    .glyphicon {
      margin-right: @dashboard-offset;
    }
  }
  .informational-block {
    margin-bottom: @dashboard-offset;
  }
  .documentation {
    margin: @dashboard-offset 0 @dashboard-offset 0;
    .documentation-link {
      margin-bottom: 5px;
      .glyphicon {
        margin-right: 5px;
      }
    }
  }
  .cluster-information {
    background-color: rgb(231, 240, 242);
    width: @page-width;
    margin: 0px 0px @dashboard-offset -@dashboard-offset * 2;
    padding: @dashboard-offset @dashboard-offset * 2;
    .cluster-info-title {
      .font-semibold;
    }
    .cluster-info-value,
    .cluster-info-title {
      height: 30px;
      line-height: 13px;
      margin-bottom: 4px;
      text-align: left;
    }
    .cluster-info-value {
      &.name {
        a {
          display: inline-block;
          max-width: 220px;
          overflow: hidden;
          cursor: pointer;
        }
        .glyphicon {
          margin-left: @dashboard-offset;
          cursor: pointer;
        }
      }
    }
    .rename-block {
      height: 30px;
      line-height: 13px;
      margin-bottom: 4px;
      text-align: left;
      input[type=text] {
        width: 240px;
        height: 26px;
        margin: -3px 0 0 -13px;
        float: left;
      }
    }
    .capacity-block {
      margin-bottom: @dashboard-offset * 2;
      .capacity-item {
        cursor: default;
        background-color: @white;
        padding: 4px @dashboard-offset;
        &.cpu {
          border: 1px solid @dashboard-gray;
        }
        &.hdd {
          border-top: 1px solid @dashboard-gray;
          border-bottom: 1px solid @dashboard-gray;
        }
        &.ram {
          border: 1px solid @dashboard-gray;
        }
        .capacity-value {
          .font-semibold;
        }
      }
    }
    .statistics-block {
      .cluster-info-value {
        color: #4e85aa;
      }
      button {
        margin-bottom: @dashboard-offset;
      }
    }
  }
  .deploy-block {
    padding: 15px 15px 0 15px;
    border: 1px solid @deploy-border;
    border-radius: 4px;
    margin-bottom: @dashboard-offset * 2;
    .validation-result ul {
      margin: @dashboard-offset 0 0;
      padding-left: 15px;
      &.danger {
        li {
          .text-danger;
        }
      }
      li {
        line-height: 1.1;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .deploy-control {
      .deploy-btn {
        margin-right: @dashboard-offset;
      }
    }
    .changes-list {
      margin-bottom: @dashboard-offset * 2;
      a {cursor: pointer;}
      .changes-header {
        .font-bold;
      }
      h4 {
        margin: 0 0 @dashboard-offset 0;
        padding: 0;
      }
      ol {
        padding: 0 0 0 16px;
        color: @gray;
      }
      .changes-item {
        margin-bottom: 5px;
      }
      .deploy-btn {
        margin-right: @dashboard-offset * 2;
        padding-top: 2px;
      }
    }
    .deploy-readiness {
      .invalid-deploy.instruction {
        .font-semibold;
        font-size: @base-font-size - 1;
        color: @red;
        margin-top: @dashboard-offset;
      }
      h4 {
        margin: 0 0 @dashboard-offset 0;
        padding: 0;
      }
      p {
        font-size: @base-font-size - 1;
        .font-semibold;
        margin: 0 0 @dashboard-offset 0;
        padding: 0;
        color: @base-text-color;
      }
      .section-title {
        .font-bold;
        font-size: @base-font-size + 2;
      }
      .btn-add-nodes {
        float: left;
      }
      li {
        margin-bottom: @dashboard-offset;
      }
      .warnings-block {
        font-size: @base-font-size - 1;
        margin-bottom: @dashboard-offset;
      }
    }
    .deploy-process {
      height: auto;
      .progress {
        width: 92%;
      }
    }
  }
  .dashboard-actions-wrapper {
    margin: @dashboard-offset 0 @dashboard-offset 0;
    .reset-environment {
      margin-right: 87px;
      .reset-environment-btn {
        margin-right: 6px;
      }
    }
    .delete-environment {
      .delete-environment-btn {
        margin-right: 5px;
      }
    }
  }
  .tooltip-wrapper {
    display: inline;
    .glyphicon {
      margin-left: @dashboard-offset / 2;
      cursor: pointer;
      .icon-default-styles(-13px, -612px);
      &:hover {
        .icon-default-styles(-53px, -612px);
      }
    }
  }
  .plugin-entry {
    margin-bottom: 15px;
    &.horizon {
      .description {
        margin-right: @dashboard-offset;
        margin-bottom: @dashboard-offset;
      }
    }
    .title {
      padding: 0;
      margin: 0;
    }
  }
}

.tooltip-inner {
  max-width: none;
  min-width: 300px;
}
